<template>
  <el-table-column
    v-if="item.link"
    :key="item.key"
    :prop="item.key"
    :label="item.label"
    :width="item.width"
    :formatter="item.formatter"
    :sortable="!!item.sortable"
  >
    <template slot-scope="{ row }">
      <el-link :title="row[item.key]" @click="linkItem(row, item.key)">
        <div class="onerow show_line_a">{{ row[item.key] }}</div>
      </el-link>
    </template>
  </el-table-column>
  <el-table-column
    v-else
    :key="item.key"
    :prop="item.key"
    :label="item.label"
    :width="item.width"
    :min-width="item.minWidth"
    :formatter="item.formatter"
    :sortable="!!item.sortable"
    :align="align"
    :show-overflow-tooltip="!!item.tooltip"
  >
    <template v-for="sonItem in item.children || []">
      <TableColumn :item="sonItem" :align="align" :key="sonItem.key" />
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: 'TableColumn',
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    align: {
      type: String,
      default: 'left'
    }
  },
  methods: {
    linkItem(row, key) {
      this.$emit('linkItem', row, key)
    }
  }
}
</script>

<style lang="scss" scoped>
.show_line_a {
  max-width: 100%;
  color: #004c99;
  &:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: 0;
    border-bottom: 1px solid #409eff;
  }
  ::v-deep .el-link--inner {
    width: 100%;
  }
  div {
    width: 100%;
  }
}
</style>
